import { reactive } from "vue";
import { defineStore } from "pinia";
import type { Size } from "@/plugins/element";

export const useComponentSizeStore = defineStore(
  "componentSizeStore",

  () => {
    //定义响应式状态
    const componentSizeState = reactive({
      cureentSize: "default" as Size
    });

    const getCurrentSize = computed(() => componentSizeState.cureentSize);

    const setComponentSize = (size: Size) => {
      componentSizeState.cureentSize = size;
    };

    return {
      componentSizeState,
      getCurrentSize,
      setComponentSize
    };
  },

  {
    persist: {
      storage: localStorage, //状态数据持久化保存在本地中
      pick: ["componentSizeState.cureentSize"] // pick表示获取状态树中那些状态
    }
  }
);
